<template>
    <div class="car">
        <div class="top">
            <Navbar title="购物车" />
        </div>
        <ul class="list">
            <li class="li1" v-for="item in data" :key="item.id">
                <div>
                    <van-card :price="item.price" :desc="item.num" :title="item.title" :thumb="item.img"
                        origin-price="10.00">
                        <template #tag>
                            <van-checkbox v-model="item.flag" @change="changeFlag(item.id)">复选框</van-checkbox>
                        </template>
                        <template #num>
                            <van-stepper v-model="item.num" @change="numAdd(item.id)" />
                        </template>
                    </van-card>
                </div>
            </li>
        </ul>
        <h2>猜你喜欢</h2>
        <ul class="list1">
            <li v-for="item in list" :key="item.id">
                <img :src="item.img" alt="">
                <p>{{ item.title }}</p>
                <p>{{ item.price }}</p>
            </li>
        </ul>
    </div>
    <div class="bottom">
<<<<<<< HEAD
        <div><input type="checkbox" name="" id="">全选</div>
=======
        <div><input type="checkbox" v-model="counter.$state.flag" @change="all">全选</div>
>>>>>>> 4f74775fa7ff1ba00b67e754027806fe8ea8b13b
        <div><span>合计：{{counter.$state.num}}</span>
         <p>免配送费</p>
        </div>
        <div @click="counter.getJiesuan()">去结算{{}}</div>
  </div>
</template>

<script setup lang="ts">
import Navbar from '@/components/Navbar.vue';
import { getfloorRight } from '@/axios/getData'
import { ref, onMounted,watch,watchEffect } from 'vue'
import { useCounterStore } from '@/stores/counter'
import { useRouter } from 'vue-router'
const $router = useRouter()
const counter = useCounterStore()
// console.log(counter);
interface Typelist {
    img: string,
    title: string,
    price: string,
    num: string,
    flag: boolean,
    id: number
}
const data: Typelist[] = ref(counter.$state.car)

    const list:any = ref([])
    const init = async () =>{
        const res = await getfloorRight()
            list.value = res
            // console.log(res)
    }
    onMounted(() =>{
        init()
        counter.getHj()
    })
    const numAdd = (id:number) =>{  
      counter.getListId(id)
      counter.getHj()
    }
    let changeFlag=(id)=>{
        console.log(id);
        counter.changeFlag(id)
    }


</script>


<style scoped>
   .bottom{
       width: 100%;
       height: 50px;
       background-color: #fff;
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0 10px;
       box-sizing: border-box;
       position: fixed;
       bottom: 50px;
   }
   .bottom>div:nth-child(1){
       display: flex;
       align-items: center;
   }
   .bottom>div:nth-child(1)>input{
       width: 20px;
       height: 20px;
   }
   .bottom>div:nth-child(2){
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       height: 50px;
       
   }
   .bottom>div:nth-child(2)>p{
       font-size: 12px;
       color: #ccc;
   }
   .bottom>div:nth-child(3){
       width: 100px;
       height: 50px;
       background-color: #2f44e6;
       color: #fff;
       text-align: center;
       line-height: 50px;
   }
   .bottom>div:nth-child(3)>span{
       font-size: 18px;
   }
   .list1>li{
       width: 45%;
       height: 200px;
       background-color: #fff;
       border-radius: 10px;
       margin-bottom: 10px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       padding: 10px;
       box-sizing: border-box;
   }
   .list1>li>div:nth-child(1){
       width: 100%;
       height: 150px;
       /* background-color: #de83ff; */
       display: flex;
       justify-content: space-between;
   }
   .list1>li>div:nth-child(1)>img{
       width: 150px;
       height: 150px;
   }
   .list1>li>div:nth-child(1)>div{
       width: 150px;
       height: 150px;
       /* background-color: #de83ff; */
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       padding: 10px;
       box-sizing: border-box;
   }
   
   .car{
       width: 100%;
       height: calc(100vh - 96px);
       background-color: #ededed;
       overflow-y: auto;
   }
   .list{
       width: 100%;
       overflow: auto;
       /* background-color:aqua; */
   }
   h2{
       width: 100%;
       height: 50px;
       line-height: 50px;
       text-align: center;
       /* background-color: #de83ff; */
       font-size: 20px;
       /* color: #fff; */
       font-weight: 600;
   }
   .van-card{
       margin: 10px;
       background-color: #fff;
       border-radius: 10px;
   }
   .van-card__price{
       color: red;
   }
   .van-card__origin-price{
       color: #ccc;
   }
   .van-card__desc{
       color: #ccc;
   }
   .van-card__title{
       color: #000;
   }
   .list1{
       width: 100%;
       display: flex;
       flex-wrap: wrap;
       justify-content: space-around;
       /* background-color: #de83ff; */
       
   }
   .list1 li{
       width: 45%;
       height: 200px;
       background-color: #fff;
       border-radius: 10px;
       margin: 10px 0;
       background-color: #addd3b;
   }
   .list1 li img{
       width: 100%;
       height: 150px;
       border-radius: 10px;
   }
   .list1 li{
       width: 45%;
       height: 200px;
       background-color: #fff;
       border-radius: 10px;
       margin: 10px 0;
       /* background-color: #de83ff; */
   }
   .list1 li img{
       width: 100%;
       height: 150px;
       border-radius: 10px;
   }
   .list1 li p:nth-child(2){
       color: #000;
       font-size: 16px;
       font-weight: 600;
   }
   .list1 li p:nth-child(3){
       color: red;
       font-size: 16px;
       font-weight: 600;
   }
   .top{
       width: 100%;
       height: 46px;
       background-color: #fff;
   }
</style>
